<template>
  <div class="box">
    <el-table :data="chargeList" border style="width: 100%; margin-top: 20px">
      <el-table-column prop="carType" label="车型" width="100" />
      <el-table-column prop="morning" label="早高峰" width="150" />
      <el-table-column
        prop="morningPrice"
        label="价格(每公里 / 元)"
        width="140"
      />
      <el-table-column prop="night" label="夜间" width="150" />
      <el-table-column prop="nightPrice" label="价格(每公里 / 元)" width="140" />
      <el-table-column prop="severeWeather" label="恶劣天气" width="150" />
      <el-table-column
        prop="severeWeatherPrice"
        label="价格(每公里 / 元)"
        width="140"
      />
      <el-table-column prop="" label="编辑">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            @click="showRoles(scope.row)"
          >编辑</el-button>
          <!-- <el-button size="mini" type="success" icon="el-icon-check"
            >保存</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑界面 -->
    <el-dialog
      title="编辑"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <!-- 内容 -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="早高峰">
          <el-time-select
            v-model="startTime"
            placeholder="起始时间"
            :picker-options="{
              start: '05:00',
              step: '00:30',
              end: '09:00',
            }"
          />
          <el-time-select
            v-model="endTime"
            placeholder="结束时间"
            :picker-options="{
              start: '05:00',
              step: '00:30',
              end: '09:00',
              minTime: startTime,
            }"
          />
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth">
          <el-input
            v-model="input"
            placeholder="早高峰价格调整(每公里/元)"
            maxlength="2"
          />
        </el-form-item>
        <el-form-item label="夜间">
          <el-time-select
            v-model="startTime2"
            placeholder="起始时间"
            :picker-options="{
              start: '00:00',
              step: '00:30',
              end: '04:00',
            }"
          />
          <el-time-select
            v-model="endTime2"
            placeholder="结束时间"
            :picker-options="{
              start: '00:00',
              step: '00:30',
              end: '04:00',
              minTime: startTime2,
            }"
          />
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth">
          <el-input
            v-model="input2"
            placeholder="夜间价格调整(每公里/元)"
            maxlength="2"
          />
        </el-form-item>
        <el-form-item label="恶劣天气">
          <el-input v-model="input3" placeholder="已实际为准" :disabled="true" />
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth">
          <el-input
            v-model="input4"
            placeholder="恶劣天气价格调整(每公里/元)"
            maxlength="2"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="Cancel">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { updateCharge, getcharge, upchargelog } from '@/api/activityCharge'

export default {
  name: 'Staff',
  data() {
    return {
      chargeList: [], // 收费表
      dialogVisible: false, // 编辑框 默认隐藏
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      startTime: '', // 早高峰开始时间
      endTime: '', // 早高峰结束时间
      startTime2: '', // 夜间开始时间
      endTime2: '', // 夜间结束时间
      formLabelWidth: '80px',
      input: '', // 早高峰价格
      input2: '', // 夜间价格
      input3: '', // 恶劣天气
      input4: '', // 恶劣天气价格
      cartype: ''
    }
  },

  mounted() {
    this.getcharge()
  },
  methods: {
    // 获取收费管理表
    // getcharge() {
    //   let that = this;
    //   this.$http("/getcharge", {
    //     params: {},
    //   })
    //     .then((resp) => {
    //       that.chargeList = resp.data.data;
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    // },

    // 获取收费管理表
    async getcharge() {
      const res = await getcharge()
      if (res.code !== 200) return this.$message.error('获取失败')
      this.chargeList = res.data
    },
    handleClose(done) {
      // 右上角X关闭
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    showRoles(i) {
      // 信息编辑
      console.log(i)
      this.dialogVisible = true
      console.log(i.carType)
      this.cartype = i.carType
    },
    Cancel() {
      // 编辑取消
      this.$confirm('确认关闭？')
        .then((_) => {
          this.dialogVisible = false
        })
        .catch((_) => {})
    },
    async submit() {
      // 确定 提交按钮
      console.log(this.cartype) // 车型
      const morning = this.startTime + '-' + this.endTime // 早高峰时间
      const night = this.startTime2 + '-' + this.endTime2 // 夜间时间
      console.log(morning)
      console.log(night)
      console.log(this.startTime + '早高峰起始时间') // 早高峰起始时间
      console.log(this.endTime + '早高峰结束时间') // 早高峰结束时间
      console.log(this.input + '早高峰价格') // 早高峰价格
      console.log(this.startTime2 + '夜间起始时间') // 夜间起始时间
      console.log(this.endTime2 + '夜间结束时间') // 夜间结束时间
      console.log(this.input2 + '夜间价格') // 夜间价格
      console.log(this.input4 + '恶劣天气价格') // 恶劣天气价格
      var reg = /^[1-9]\d*$/
      if (
        this.startTime === null ||
        this.startTime === '' ||
        this.endTime === null ||
        this.endTime === '' ||
        this.input === null ||
        this.input === '' ||
        this.startTime2 === null ||
        this.startTime2 === '' ||
        this.endTime2 === null ||
        this.endTime2 === '' ||
        this.input2 === null ||
        this.input2 === '' ||
        this.input4 === null ||
        this.input4 === ''
      ) {
        this.$message.error('编辑内容不能为空，请编辑完整信息!')
      } else if (
        !reg.test(this.input) ||
        !reg.test(this.input2) ||
        !reg.test(this.input4)
      ) {
        this.$message.error('调整价格有误！')
      } else {
        // this.$http("/updateCharge", {
        //   params: {
        //     cartype: this.cartype, //车型
        //     morning: morning, //早高峰时间
        //     night: night, //夜间时间
        //     input: this.input, //早高峰价格
        //     input2: this.input2, //夜间价格
        //     input4: this.input4, //恶劣天气价格
        //   },
        // })
        //   .then((resp) => {
        //     console.log(resp);
        //   })
        //   .catch((err) => {
        //     console.log(err);
        //   });
        // 修改价格

        // async selectStaffAry() {
        // let charge_list = {
        //   cartype: this.cartype, //车型
        //   morning: morning, //早高峰时间
        //   night: night, //夜间时间
        //   input: this.input, //早高峰价格
        //   input2: this.input2, //夜间价格
        //   input4: this.input4, //恶劣天气价格
        // }
        const res = await updateCharge(this.cartype, morning, night, this.input, this.input2, this.input4)
        if (res.code !== 200) return this.$message.error('获取失败')
        // },
        this.getcharge()
        this.startTime = ''
        this.endTime = ''
        this.startTime2 = ''
        this.endTime2 = ''
        this.input = ''
        this.input2 = ''
        this.input4 = ''
        this.dialogVisible = false // 编辑框隐藏
        this.$message({
          message: '修改成功',
          type: 'success'
        })
        // 修改操作日志
        upchargelog().then(res => {
          console.log(res)
        })
      }
    }
  }
}
</script>

<style lang="scss">
.box {
  width: 90%;
  margin: 0 auto;
}
</style>
